
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

class MiApiInsAdd extends React.Component {
    state = {
        percent:0,
        previewVisible: false,
        previewOutPutVisible: false,
        previewImage: '',
        fileList: [],
        outPutImg:"https://langjie.oss-cn-hangzhou.aliyuncs.com/space/root/project/s2mq/wenhao.png"
    };



    componentDidMount() {
        let that=this;
        this.apiCode="tuxiangtezhengtiqu";
        app.get("/apiLogAddStep",async (req,res)=>{
            let params=req.params.params;
            if(params.step==1){
                that.setState({
                    percent:50
                })
            } else if(params.step==2){
                that.setState({
                    percent:75
                })
            } else if(params.step==3){
                that.setState({
                    percent:100,
                    outPutImg:params.res
                });
                M.tt=that
            }
        });
    };



    handleCancel = () => this.setState({ previewVisible: false });

    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }

        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
        });
    };

    handleChange = ({ fileList }) => this.setState({ fileList });
    async submit(){
        if(this.state.fileList.length==0){
            message.warning("请选择一张图片");
            return
        }
       let split= this.state.fileList[0].originFileObj.name.split(".")
       this.inputFileOsskey="root/project/img2data/data/input/"+split[0]+"-"+new Date().getTime()+"."+split[1];
       let addOssFileRes= await  new Promise((resolve,reject) => {
           MIO.uplodaOssFile(this.inputFileOsskey,  this.state.fileList[0].originFileObj,d=>{
               console.log("process=>",d);
           },async d=>{

               resolve(d)
           },d=>{
               reject(d)
           });
       }) ;
       let fileUrl=addOssFileRes.res.requestUrls[0].split("?")[0];
        let ossFileAddResult=await  MIO.ossFileAdd({
            name:this.state.fileList[0].originFileObj.name,
            ossKey:this.inputFileOsskey,
            capacity: this.state.fileList[0].size
        });
       if(fileUrl==null||fileUrl==""){
           return
       }
       let r=await  MIO.apiInsAdd({
             apiCode: this.apiCode,
             fileUrl:fileUrl,
             fileId: ossFileAddResult.data.id

       });
        if(M.checkR(r)){
            this.setState({
                percent:25
            });
        }
    }



    render() {
        const { previewVisible, previewImage, fileList,previewOutPutVisible } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div  className={"MiApiInsAddDiv"}>
                    <h1>选择算法</h1>
                    <Select defaultValue="tuxiangtezhengtiqu" style={{ width: 300 }} onChange={v=>{
                           this.apiCode=v;
                    }}>
                        <Option value="img2heibai">图片转黑白</Option>
                        <Option value="wutijiance">物体检测</Option>
                        <Option value="tuxiangtezhengtiqu">图像特征提取</Option>
                    </Select>
                   <div>
                       <div>
                           <h1>输入图片</h1>
                           <Upload
                               listType="picture-card"
                               fileList={fileList}
                               onPreview={this.handlePreview}
                               onChange={this.handleChange}
                           >
                               {fileList.length >= 1 ? null : uploadButton}
                           </Upload>

                       </div>
                        <div>
                            <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                                <img alt="example" style={{ width: '100%' }} src={previewImage} />
                            </Modal>
                            <Modal visible={previewOutPutVisible} footer={null} onCancel={()=>{this.setState({
                                previewOutPutVisible:false
                            })}}>
                                <img alt="example" style={{ width: '100%' }} src={this.state.outPutImg} />
                            </Modal>
                            <Icon type="double-right" /><Icon type="double-right" />
                            <Icon type="double-right" /><Icon type="double-right" />
                            <img alt="example" onClick={v=>{
                                this.setState({
                                    previewOutPutVisible:true
                                })
                            }} style={{ width: 100}} src={this.state.outPutImg} />
                        </div>



                   </div>
                         <h1>进度</h1>
                        <div>
                            <Progress type="circle" percent={this.state.percent} />
                        </div>
                        <Button disabled ={!(this.state.percent==0 || this.state.percent==100)} onClick={v=>this.submit()} type="primary" block>
                            提交
                        </Button>
            </div>
        );
    }
}





